<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getCourseList">
                        <el-button type="success" slot="append" icon="el-icon-search" @click="getCourseList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="13">
                    <el-button type="primary" @click="showAddCourseDialog" style="float: right">添加课程</el-button>
                </el-col>
            </el-row>

            <el-table :data="courseList" border stripe :header-cell-style="table_header">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="course_name" label="课程" align="center"></el-table-column>
                <el-table-column prop="course_type" label="课程类型" align="center" width="100px"></el-table-column>
                <el-table-column prop="credit" label="学分" align="center" width="60px"></el-table-column>
                <el-table-column prop="teacher" label="授课教师" align="center"></el-table-column>
                <el-table-column prop="department.name" label="授课院系" align="center"></el-table-column>
                <el-table-column prop="semester.name" label="学期" align="center" min-width="120px"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑课程"
                                :enterable="false"
                                placement="top"
                        >
                            <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    circle
                                    @click="showEditCourseDialog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除课程"
                                :enterable="false"
                                placement="top"
                        >
                            <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    circle
                                    @click="removeCourseById(scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
                    hide-on-single-page
                    prev-text="上一页"
                    next-text="下一页"
            ></el-pagination>
        </el-card>
        <!-- 添加或编辑课程对话框 -->
        <el-dialog
                :title="Dialog_title"
                :visible.sync="CourseDialogVisible"
                width="50%"
                @close="resetForm('CourseFormRef')"
                :close-on-click-modal="false"
        >
            <el-form
                    :model="CourseForm"
                    ref="CourseFormRef"
                    :rules="CourseFormRules"
                    label-width="100px">
                <el-form-item label="课程名" prop="course_name">
                    <el-input v-model="CourseForm.course_name"></el-input>
                </el-form-item>
                <el-form-item label="课程类型" prop="course_type">
                    <el-select v-model="CourseForm.course_type" filterable placeholder="请选择">
                        <el-option label="考试课" value="考试课"></el-option>
                        <el-option label="考查课" value="考查课"></el-option>
                        <el-option label="公选课" value="公选课"></el-option>
                        <el-option label="限选课" value="限选课"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程学分" prop="credit">
                    <el-input type="number" v-model.number="CourseForm.credit"></el-input>
                </el-form-item>
                <el-form-item label="授课教师" prop="teacher">
                    <el-input v-model="CourseForm.teacher"></el-input>
                </el-form-item>
                <el-form-item label="学期：">
                    <el-select v-model="CourseForm.semester_id" filterable placeholder="请选择">
                        <el-option
                                v-for="item in semesterList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授课院系：">
                    <el-select v-model="CourseForm.department_id" filterable placeholder="请选择">
                        <el-option
                                v-for="item in departmentList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="CourseDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddOrUpdateCourse">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                queryInfo: {
                    query: '',
                    pageNum: 1,
                    pageSize: 10,
                    user_type: "",
                },
                total: 0,

                CourseDialogVisible: false,

                courseList: [],
                departmentList: [],
                semesterList: [],

                CourseForm: {},
                CourseFormRules: {
                    course_name: [
                        { required: true, message: '请输入课程名称', trigger: 'blur' },
                    ],
                    course_type: [
                        { required: true, message: '请输入课程类型', trigger: 'blur' },
                    ],
                    credit: [
                        { required: true, message: '请输入课程学分', trigger: 'blur' },
                    ],
                    teacher_id: [
                        { required: true, message: '请选择授课教师', trigger: 'blur' },
                    ],
                    semester_id: [
                        { required: true, message: '请输入学期', trigger: 'blur' },
                    ],
                    department_id: [
                        { required: true, message: '请输入授课院系', trigger: 'blur' },
                    ],
                },

                Dialog_state: '',
                Dialog_title: '',
            }
        },
        created(){
            this.getCourseList();
            this.getSemesterList();
            this.getDepartmentList();
        },
        methods:{
            table_header(row, column, rowIndex, columnIndex){
                return 'background-color: #409EFF; color:white'
            },
            handleSizeChange (newSize) {
                this.queryInfo.pageSize = newSize;
                this.getCourseList();
            },
            handleCurrentChange (newSize) {
                this.queryInfo.pageNum = newSize;
                this.getCourseList();
            },

            resetForm(formName) {
                this.CourseForm = {};
                this.$refs[formName].resetFields()
            },
            showAddCourseDialog(){
                this.Dialog_state = 'add';
                this.Dialog_title = "添加课程"
                this.CourseDialogVisible = true;
            },
            showEditCourseDialog (course) {
                this.Dialog_state = 'edit';
                this.Dialog_title = "编辑课程";
                this.CourseForm = course;
                this.CourseDialogVisible = true;
            },

            async getDepartmentList(){
                const {data: res, status: status} = await this.axios.get('department/getDepartmentList');
                if (status !== 200) return this.$message.error("获取院系列表失败");
                this.departmentList = res.data.departments;
            },

            async getSemesterList(){
                const {data: res, status: status} = await this.axios.get('semester/getSemesterList');
                if (status !== 200) return this.$message.error("获取学期列表失败");
                this.semesterList = res.data.semesters;
            },

            async getCourseList(){
                const {data: res, status: status} = await this.axios.get('course/getCourseList', {params: this.queryInfo})
                if (status !== 200) return this.$message.error("获取成绩列表失败");
                this.courseList = res.data.courses;
                this.total = res.data.total;
            },

            AddOrUpdateCourse(){
                if (this.Dialog_state === "add") {
                    this.$refs.CourseFormRef.validate(async valid => {
                        if (!valid) return;
                        const {data: res, status: status} = await this.axios.post('course/addCourse', this.CourseForm);
                        if (status !== 200) {
                            this.$message.error('更新用户信息失败！')
                        }
                        // 隐藏添加用户对话框
                        this.$message.success('更新用户信息成功！');
                        this.getCourseList();
                        this.CourseDialogVisible = false;
                    })
                } else {
                    this.$refs.CourseFormRef.validate(async valid => {
                        if (!valid) return;
                        const {data: res, status: status} = await this.axios.put('course/updateCourse', this.CourseForm);
                        if (status !== 200) {
                            this.$message.error('更新用户信息失败！')
                        }
                        // 隐藏添加用户对话框
                        this.$message.success('更新用户信息成功！');
                        this.getCourseList();
                        this.CourseDialogVisible = false;
                    })
                }
            },

            async removeCourseById (course) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除课程 ' + course.course_name +  ',  是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err);
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res, status: status } = await this.axios.delete('course/deleteCourse', {params:{'id': course.id}});
                if (status !== 200) return this.$message.error('删除班级失败！');
                this.$message.success('删除班级成功！');
                this.getCourseList();
            },
        }
    }
</script>
<style lang="less" scope>

</style>